<ui:composition template="/template.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jstl/core"
                xmlns:t="http://myfaces.apache.org/tomahawk">
    <ui:define name="customs">
        <script type="text/javascript" src="#{contextPath}/registration/registration.js"></script>
    </ui:define>
    <ui:define name="main-content">
        <h:form id="registrationForm" styleClass="wufoo leftLabel">
            <h2><span><h:outputText value="#{resource['registration.edition']}"/></span></h2>
            <div id="errorMsgLbl" align="center">
                <h:messages id="errorMessages" layout="table"/>
                <h:outputText value="Si no aparecen los valores en las listas, por favor acceda desde " style="font-size: 70% !important"/>
                <h:outputText value="http://sites.ieee.org/capc/?p=1757" style="font-size: 70% !important; color:blue !important;"/>
            </div>
            <center>                
                <table style="border: 1px solid #CCCCCC; background: #E3E3E3" width="70%">
                    <tr>
                        <td>                                            
                            <ul>
                                <li class="name">
                                    <label class="desc" for="memberId">
                                        <h:outputText value="#{resource['attendee.memberId']}"/>
                                    </label>                    
                                    <span>
                                        <input jsfc="h:inputText" size="20" type="text" id="memberId" class="memberId filtroMember filtro field text"
                                               value="#{registrationBean.attendee.memberId}"/>
                                        <label for="memberId" > 
                                            <input jsfc="h:inputText" size="10" type="text" id="verification" class="verification field text" disabled="true"
                                                   style="border: 0px; background-color: transparent; color: red;"
                                                   value="#{registrationBean.attendee.memberVerification}"/>
                                        </label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="primer_nombre">
                                        #{resource['person.fullName']}
                                    </label>
                                    <span>
                                        <input jsfc="h:inputText" id="primer_nombre" size="12" type="text" class="primer_nombre field text"
                                               value="#{registrationBean.attendee.firstName}"/>
                                        <label for="primer_nombre"><h:outputText value="#{resource['person.firstName']}"/><h:outputText value=" *" style="color: red;"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="segundo_nombre" size="12" type="text" class="segundo_nombre field text"
                                               value="#{registrationBean.attendee.middleName}"/>
                                        <label for="segundo_nombre"><h:outputText value="#{resource['person.middleName']}"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="primer_apellido" size="12" type="text" class="primer_apellido field text"
                                               value="#{registrationBean.attendee.lastName}"/>
                                        <label for="primer_apellido"><h:outputText value="#{resource['person.lastName']}"/><h:outputText value=" *" style="color: red;"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="segundo_apellido" size="12" type="text" styleClass="segundo_apellido field text"
                                               value="#{registrationBean.attendee.secondLastName}"/>
                                        <label for="segundo_apellido"><h:outputText value="#{resource['person.secondLastName']}"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="nickName">
                                        <h:outputText value="#{resource['attendee.nickName']}"/>
                                    </label>                    
                                    <span>
                                        <input jsfc="h:inputText" id="nickName" type="text" class="nickName field text"
                                               value="#{registrationBean.attendee.nickName}"/>
                                        <label for="nickName"><h:outputText value="#{resource['attendee.nickNameHelp']}"/></label>
                                    </span>
                                </li>                                                                
                                <li class="name">
                                    <label class="desc" for="nacionalidad">
                                        <h:outputText value="#{resource['person.country']}"/>
                                    </label>                    
                                    <span>
                                        <t:selectOneMenu id="nacionalidad" value="#{registrationBean.attendee.country}" styleClass="country field text" style="width: 200px;">
                                            <f:selectItem itemLabel=""/>
                                            <t:selectItems value="#{registrationBean.countries}" var="country" itemLabel="#{country.nationality}" itemValue="#{country}"/>
                                            <f:converter converterId="objconverter"/>
                                        </t:selectOneMenu>
                                        <label for="nacionalidad"><h:outputText value="Escoja un valor de la lista"/></label>
                                    </span>
                                </li>                                
                                <li class="name">
                                    <label class="desc" for="residencia">
                                        <h:outputText value="#{resource['person.residence']}"/>
                                        <h:outputText value=" *" style="color: red;"/>
                                    </label>
                                    <span>
                                        <t:selectOneMenu id="residencia" value="#{registrationBean.attendee.residence}" 
                                                         styleClass="residence field text" style="width: 200px;">
                                            <f:selectItem itemLabel=""/>
                                            <t:selectItems value="#{registrationBean.countries}" var="country" itemLabel="#{country.name}" itemValue="#{country}"/>
                                            <f:converter converterId="objconverter"/>
                                        </t:selectOneMenu>                                        
                                        <label for="residencia"><h:outputText value="Escoja un valor de la lista"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="category">
                                        <h:outputText value="#{resource['attendee.category']}"/>
                                        <h:outputText value=" *" style="color: red;"/>
                                    </label>
                                    <span>
                                        <t:selectOneMenu id="category" value="#{registrationBean.attendee.category}" 
                                                         styleClass="category field text" style="width: 200px;">
                                            <f:selectItem itemLabel=""/>
                                            <t:selectItems value="#{registrationBean.categories}" var="category" itemLabel="#{category.description}" itemValue="#{category}"/>
                                            <f:converter converterId="objconverter"/>
                                        </t:selectOneMenu>                                        
                                        <label for="category"><h:outputText value="Escoja un valor de la lista"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="paymentMethod">
                                        <h:outputText value="#{resource['attendee.paymentMethod']}"/>
                                        <h:outputText value=" *" style="color: red;"/>
                                    </label>
                                    <span>
                                        <t:selectOneMenu id="paymentMethod" value="#{registrationBean.attendee.paymentMethod}" 
                                                         styleClass="paymentMethod field text" style="width: 200px;">
                                            <f:selectItem itemLabel=""/>
                                            <t:selectItems value="#{registrationBean.paymentMethods}" var="paymentMethod" itemLabel="#{paymentMethod.name}" itemValue="#{paymentMethod}"/>
                                            <f:converter converterId="objconverter"/>
                                        </t:selectOneMenu> 
                                        <label for="paymentMethod"><h:outputText value="Escoja un valor de la lista"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="roomPlan">
                                        <h:outputText value="#{resource['attendee.roomPlan']}"/>
                                        <h:outputText value=" *" style="color: red;"/>
                                    </label>
                                    <span>
                                        <t:selectOneMenu id="roomPlan" value="#{registrationBean.attendee.roomPlan}" 
                                                         styleClass="roomPlan field text" style="width: 200px;">
                                            <f:selectItem itemLabel=""/>
                                            <t:selectItems value="#{registrationBean.roomPlans}" var="roomPlan" itemLabel="#{roomPlan.name}" itemValue="#{roomPlan}"/>
                                            <f:converter converterId="objconverter"/>
                                        </t:selectOneMenu> 
                                        <label for="roomPlan"><h:outputText value="Escoja un valor de la lista"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="email">
                                        <h:outputText value="#{resource['person.email']}"/>
                                        <h:outputText value=" *" style="color: red;"/>
                                    </label>
                                    <span>
                                        <input jsfc="h:inputText" id="email" size="60" type="text" class="email field text"
                                               value="#{registrationBean.attendee.email}"/>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="branch">
                                        <h:outputText value="#{resource['attendee.branch']}"/>
                                    </label>
                                    <span>
                                        <input jsfc="h:inputText" id="branch" size="60" type="text" class="branch field text"
                                               value="#{registrationBean.attendee.branch}"/>
                                    </span>
                                </li>
                                <li id="diplomaInfo" class="name">
                                    <label class="desc" for="requireDiploma">
                                        <h:outputText value="#{resource['attendee.requireDiploma']}"/>
                                    </label>
                                    <span>
                                        <h:selectBooleanCheckbox id="requireDiploma" class="requireDiploma" value="#{registrationBean.attendee.requireDiploma}"/>
                                    </span>
                                </li>
                                <li id="expositorPoster" class="name">
                                    <label class="desc">
                                        <h:outputText value="#{resource['attendee.expositor']}"/>
                                    </label>
                                    <span style="width: 18%">
                                        <label class="desc" for="expositorPoster">
                                            <h:outputText value="#{resource['attendee.expositorPoster']}"/>
                                        </label>
                                        <span>
                                            <h:selectBooleanCheckbox id="expositorPoster" class="expositorPoster" value="#{registrationBean.attendee.expositorPoster}"/>
                                        </span>
                                    </span>
                                    <span style="width: 20%">
                                        <label class="desc" for="expositorArticle">
                                            <h:outputText value="#{resource['attendee.expositorArticle']}"/>
                                        </label>
                                        <span>
                                            <h:selectBooleanCheckbox id="expositorArticle" class="expositorArticle" value="#{registrationBean.attendee.expositorArticle}"/>
                                        </span>
                                    </span>
                                </li>
                                <li id="transportationInfo" class="name" style="display:none;">
                                    <label class="desc" for="transportation">
                                        <h:outputText value="#{resource['attendee.needTransportation']}"/>
                                    </label>
                                    <span>
                                        <h:selectBooleanCheckbox id="transportation" class="transportation" value="#{registrationBean.attendee.needTransportation}"/>
                                    </span>
                                </li>
                                <li id="lodgingInfo" class="lodgingInfo name" style="display:none;">
                                    <label class="desc" for="arrivalDate">
                                        <h:outputText value="#{resource['attendee.arrival']}"/>
                                    </label>
                                    <span>
                                        <span>
                                            <input jsfc="h:inputText" id="arrivalDate" size="10" type="text" class="field text"
                                                   value="#{registrationBean.attendee.lodging.arrivalDate}">
                                                <f:convertDateTime pattern="dd/MM/yyyy"/>
                                            </input>
                                            <label for="arrivalDate"><h:outputText value="#{resource['attendee.dateFormat']}"/></label>
                                        </span>
                                        <span>
                                            <img id="fpp_btn" class="datepicker" alt="Escoger fecha." style="border: 0 !important;" src="#{contextPath}/images/calendar.png"/>
                                        </span>
                                    </span>
                                    <span>
                                        <span>
                                            <input jsfc="h:inputText" id="arrivalTime" size="8" type="text" class="field text"
                                                   value="#{registrationBean.attendee.lodging.arrivalTime}">
                                                <f:convertDateTime pattern="h:mm a"/>
                                            </input>
                                            <label for="arrivalTime"><h:outputText value="#{resource['attendee.timeFormat']}"/></label>
                                        </span>
                                    </span>
                                    <span>
                                        <h:selectOneMenu id="terminal" value="#{registrationBean.attendee.lodging.terminal}" 
                                                         styleClass="field text" style="width: 85px;height: 21px;">
                                            <f:selectItem itemLabel="No aplica"/>
                                            <f:selectItem itemLabel="Aerea" itemValue="AEREA"/>
                                            <f:selectItem itemLabel="Terrestre" itemValue="TERRESTRE"/>
                                        </h:selectOneMenu>
                                        <label for="terminal"><h:outputText value="#{resource['attendee.terminal']}"/></label>
                                    </span>
                                    <span>
                                        <input jsfc="h:inputText" id="terminalDescription" size="20" type="text" class="field text"
                                               value="#{registrationBean.attendee.lodging.terminalDescription}"
                                               title="Nombre y no. vuelo/nombre transporte terrestre"/>
                                        <label for="terminalDescription"><h:outputText value="#{resource['attendee.terminalDescription']}"/></label>
                                    </span>
                                </li>
                                <li id="delegationLeader" class="delegationLeader name">
                                    <label class="desc" for="delegationLeader">
                                        <h:outputText value="#{resource['attendee.delegationLeader']}"/>
                                    </label>
                                    <span>
                                        <h:selectBooleanCheckbox id="delegationLeader" class="delegationLeader" value="#{registrationBean.attendee.delegationLeader}"/>
                                    </span>
                                </li>                                
                                <li class="name">
                                    <label class="desc" for="comments">
                                        <h:outputText value="#{resource['attendee.comments']}"/>
                                    </label>
                                    <span>
                                        <input jsfc="h:inputText" id="comments" size="60" type="text" class="field text"
                                               value="#{registrationBean.attendee.comments}"/>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="help">                                        
                                    </label>
                                    <span>
                                        <label><h:outputText value="* Campos requeridos" style="color:red;"/></label>
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="issues">
                                    </label>
                                    <span>
                                        <label><h:outputText value="Informar problemas a conescapan2014@ieee.org" style="color:blue;"/></label>                                        
                                    </span>
                                </li>
                                <li class="name">
                                    <label class="desc" for="tested">
                                    </label>
                                    <span>                                        
                                        <label><h:outputText value="Probado con browsers: Mozilla Firefox, Chrome, IE8" style="color:blue;"/></label>
                                    </span>
                                </li>
                            </ul>                            
                        </td>
                    </tr>
                </table>
            </center>
            <br/>
            <div>
                <h:commandLink action="#{registrationBean.cancel}" class="button_round">
                    <ins>#{resource['button.cancel']}</ins>
                </h:commandLink>
                <h:commandLink action="#{registrationBean.reset}" class="button_round">
                    <ins>#{resource['button.clean']}</ins>
                </h:commandLink>
                <h:commandLink action="#{registrationBean.save}" class="button_round">
                    <ins>#{resource['button.sendPre']}</ins>
                </h:commandLink>
            </div>
        </h:form>
    </ui:define>
</ui:composition>